@import '../basic/globalVar.scss';
@import '../mixins/index.scss';
@include classNameConnect(tooltip) {
  display: inline-block;

  @include el(target, false) {
    display: block;
    position: relative;
  }
  @include el(arrow) {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    border-color: transparent;
  }

  @include el(popper) {
    display: inline-block;
    z-index: $--popover-z-index;
    color: $--color-white;

    @include el(content) {
      position: relative;
    }
    &[x-placement^='top'] {
      @include el(arrow, false) {
        bottom: 0;
        transform: translateY(100%);
        border-width: $--popover-arrow-border-width
          $--popover-arrow-border-width 0;
        border-top-color: $--tooltip-background-color-default;
      }
    }

    &[x-placement^='bottom'] {
      @include el(arrow, false) {
        top: 0;
        transform: translateY(-100%);
        border-width: 0 $--popover-arrow-border-width
          $--popover-arrow-border-width;
        border-bottom-color: $--tooltip-background-color-default;
      }
    }

    &[x-placement='top'],
    &[x-placement='bottom'] {
      @include el(arrow, false) {
        left: 50%;
        margin-left: -$--popover-arrow-border-width;
      }
    }

    &[x-placement='top-start'],
    &[x-placement='bottom-start'] {
      @include el(arrow, false) {
        left: #{$--popover-arrow-border-width * 2};
      }
    }

    &[x-placement='top-end'],
    &[x-placement='bottom-end'] {
      @include el(arrow, false) {
        right: #{$--popover-arrow-border-width * 2};
      }
    }

    &[x-placement^='left'] {
      @include el(arrow, false) {
        right: 0;
        transform: translateX(100%);
        border-width: $--popover-arrow-border-width 0
          $--popover-arrow-border-width $--popover-arrow-border-width;
        border-left-color: $--tooltip-background-color-default;
      }
    }

    &[x-placement^='right'] {
      @include el(arrow, false) {
        left: 0;
        transform: translateX(-100%);
        border-width: $--popover-arrow-border-width
          $--popover-arrow-border-width $--popover-arrow-border-width 0;
        border-right-color: $--tooltip-background-color-default;
      }
    }

    &[x-placement='left'],
    &[x-placement='right'] {
      @include el(arrow, false) {
        top: 50%;
        margin-top: -$--popover-arrow-border-width;
      }
    }

    &[x-placement='left-start'],
    &[x-placement='right-start'] {
      @include el(arrow, false) {
        top: $--popover-arrow-border-width;
      }
    }

    &[x-placement='left-end'],
    &[x-placement='right-end'] {
      @include el(arrow, false) {
        bottom: $--popover-arrow-border-width;
      }
    }
  }

  @include el(inner) {
    padding: 5px 10px;
    overflow: hidden;
    text-align: left;
    box-sizing: border-box;
    line-height: 20px;
    box-shadow: $--tooltip-box-shadow;
    border-radius: $--border-radius-default;
    background-color: $--tooltip-background-color-default;
  }
}
